<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="topruleForm"
      >
        <el-form-item label="订单号:">
          <el-input
            v-model="formInline.orderNum"
            placeholder="订单号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户手机号:">
          <el-input
            v-model="formInline.merchantName"
            placeholder="用户手机号"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="商家名称:">
          <el-input
            v-model="formInline.shouhuoName"
            placeholder="商家名称"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btnBox">
      <el-button
        class="btnEevery"
        :type="chooseIndex == index ? 'primary' : ''"
        v-for="(item, index) in topBtnList"
        :key="index"
        @click="chooseStatus(index)"
      >
        {{ item }}
        <div class="tag" v-if="index == 2 && daifukuanNums != 0">
          {{ daifukuanNums }}
        </div>
        <div class="tag" v-if="index == 2 && weijiedanNums != 0">
          {{ weijiedanNums }}
        </div>
        <div class="tag" v-if="index == 3 && weifahuoNums != 0">
          {{ weifahuoNums }}
        </div>
      </el-button>
    </div>
    <div class="text item">
      <!-- <span class="gauge">订单收入金额:222223333 元</span> -->

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="550"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="indexMethod"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="order_id"
          align="center"
          label="订单编号"
          width="180"
        >
        </el-table-column>
        <!-- <el-table-column align="center" label="商家信息" width="200">
          <template slot-scope="scope">
            <div class="modality">
              <div class="modalityUser">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.seller_shop_name"
                  placement="top-start"
                >
                  <span class="text"
                    >公司名称:{{ scope.row.seller_shop_name }}</span
                  >
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column> -->

        <!-- <el-table-column prop="search_id" align="center" label="关联订单">
        </el-table-column> -->

        <el-table-column
          prop="ctime"
          align="center"
          label="下单时间/支付时间"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户名称">
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="用户手机号">
        </el-table-column> -->
        <el-table-column prop="goods_num" align="center" label="商品数量">
        </el-table-column>
        <el-table-column prop="sender_amount" align="center" label="运费">
        </el-table-column>
        <el-table-column prop="order_amount" align="center" label="订单金额">
        </el-table-column>
        <!-- <el-table-column prop="allPirce" align="center" label="总计">
        </el-table-column> -->
        <el-table-column prop="status_text" align="center" label="状态">
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
              >查看</el-button
            >
            <!-- <el-button
              size="mini"
              type="success"
              @click="handleEdit1(scope.row)"
              v-if="scope.row.pay_status == 2 && scope.row.ship_status == 1"
              >接单</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit2(scope.row)"
              v-if="scope.row.pay_status == 2 && scope.row.ship_status == 2"
              >发货</el-button
            > -->
            <el-button
              size="mini"
              type="warning"
              @click="cancleOrder(scope.row)"
              v-if="
                scope.row.status_text == '待支付' ||
                scope.row.status_text == '未接单' ||
                scope.row.status_text == '已接单'
              "
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50, 100, 300]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="dataCollection" :model="form" label-width="100px">
          <span>
            <h4>商家信息</h4>
          </span>
          <el-form-item label="商家名称" class="spanMag">
            {{ form.seller_info ? form.seller_info.company_name : "" }}
          </el-form-item>
          <el-form-item label="负责人姓名" class="spanMag">
            {{ form.seller_info ? form.seller_info.charge_person_name : "" }}
          </el-form-item>
          <span>
            <h4>用户信息</h4>
          </span>
          <el-form-item label="用户名" class="spanMag">
            {{ form.user_find ? form.user_find.name : "" }}
          </el-form-item>
          <!-- <el-form-item label="用户手机号" class="spanMag">
            {{ form.mobile }}
          </el-form-item> -->
          <span>
            <h4>收货人信息</h4>
          </span>
          <el-form-item label="收货人" class="spanMag">
            {{ form.ship_name }}
          </el-form-item>
          <el-form-item label="联系方式" class="spanMag">
            {{ form.ship_mobile }}
          </el-form-item>
          <el-form-item label="收货地址" class="spanMag">
            {{ form.ship_address_ds }}
          </el-form-item>
          <el-form-item
            label="支付方式"
            class="spanMag"
            v-if="form.order_type != 3 && form.order_type != 11"
          >
            {{ form.payment_code_text }}
          </el-form-item>
          <!-- <div v-if="this.form.length != 0"> -->
          <span>
            <h4>配送信息</h4>
          </span>
          <el-form-item label="配送方式" class="spanMag">
            {{ form.delivery_method_text }}
          </el-form-item>
          <!-- <el-form-item label="运费" class="spanMag">
            {{ form.sender_amount }}
          </el-form-item>
          <el-form-item label="上楼方式" class="spanMag">
            {{ form.up_method_text }}
          </el-form-item>
          <el-form-item
            label="首楼踏数"
            class="spanMag"
            v-if="form.up_method > 1 && form.up_method == 3"
          >
            {{ form.up_method_text }}踏
          </el-form-item>
          <el-form-item
            label="后续楼层"
            class="spanMag"
            v-if="form.up_method > 1 && form.up_method == 3"
          >
            {{ form.floors_num }}楼
          </el-form-item>
          <el-form-item
            label="平移搬运距离"
            class="spanMag"
            v-if="form.up_method > 1"
          >
            {{ form.transport }}米
          </el-form-item>
          <el-form-item
            label="途中台阶数"
            class="spanMag"
            v-if="form.up_method > 1"
          >
            {{ form.way_footstep_num }}踏
          </el-form-item> -->
          <!-- </div> -->
          <span>
            <h4>发票信息</h4>
          </span>
          <el-form-item class="spanMag fapiao">
            <el-descriptions title="">
              <el-descriptions-item
                label="发票ID"
                v-if="form.fapiao_status == 1"
                >{{ form.invoice[0].id }}</el-descriptions-item
              >
              <el-descriptions-item
                label="抬头"
                v-if="form.fapiao_status == 1"
                >{{ form.invoice[0].name }}</el-descriptions-item
              >
              <el-descriptions-item
                label="手机号"
                v-if="form.fapiao_status == 1"
                >{{ form.invoice[0].phone }}</el-descriptions-item
              >
              <el-descriptions-item
                label="邮箱"
                v-if="form.fapiao_status == 1"
                >{{ form.invoice[0].email }}</el-descriptions-item
              >
              <el-descriptions-item
                label="发票类型"
                v-if="form.fapiao_status == 1"
                >{{
                  form.invoice[0].type == 1 ? "个人" : "企业"
                }}</el-descriptions-item
              >
              <el-descriptions-item
                label="税号"
                v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                >{{ form.invoice[0].duty }}</el-descriptions-item
              >
              <el-descriptions-item
                label="企业地址"
                v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                >{{ form.invoice[0].address }}</el-descriptions-item
              >
              <el-descriptions-item
                label="企业电话"
                v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                >{{ form.invoice[0].enterprise_phone }}</el-descriptions-item
              >
              <el-descriptions-item
                label="开户行名称"
                v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                >{{ form.invoice[0].row_name }}</el-descriptions-item
              >
              <el-descriptions-item
                label="开户行账号"
                v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                >{{ form.invoice[0].account }}</el-descriptions-item
              >
              <el-descriptions-item label="提示" v-if="form.fapiao_status == 0">
                <el-tag size="small">暂无开票</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-form-item>
          <span>
            <h4>订单备注</h4>
          </span>
          <el-form-item label="订单备注" class="spanMag">
            {{ form.remark }}
          </el-form-item>
          <span>
            <h4>商品信息</h4>
          </span>
          <!-- <el-form-item label="商品信息" class="spanMag"> -->
          <el-table
            :data="form.item_info"
            border
            style="width: 100%"
            class="spanMag"
          >
            <el-table-column
              prop="name"
              align="center"
              label="商品名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="price"
              align="center"
              label="商品单价"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="nums" align="center" label="购买数量">
            </el-table-column>
            <el-table-column prop="amount" align="center" label="商品总价">
              <!-- <template slot-scope="scope">
                  {{ scope.row.nums * scope.row.price }}
                </template> -->
            </el-table-column>
            <el-table-column align="center" label="是否截断">
              <template slot-scope="scope">
                {{ scope.row.truncation == 3 ? "否" : "是" }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="截断备注">
              <template slot-scope="scope">
                {{
                  scope.row.truncation == 1
                    ? "2米截断"
                    : scope.row.truncation_note
                }}
              </template>
            </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
          <div class="textFor">商品总价: {{ form.goods_amount }} 元</div>
          <!-- <span style="margin-top: 20px; display: block;">
              <h4>退货单</h4>
            </span>  -->
          <!-- <div>
              <el-form-item label="退货单" class="spanMag">
                <el-table max-height="200" :data="form.returnItem" border style="width: 100%">
                  <el-table-column prop="reship_id" label="退货单号" width="">
                  </el-table-column>
                  <el-table-column prop="aftersales_id" label="售后单号" width="">
                  </el-table-column>
                  <el-table-column prop="status_text" label="退货状态" width="150">
                  </el-table-column>
                  <el-table-column prop="ctime" label="退货时间">
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div> -->
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backtrack">返回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
  
<script>
import {
  merchantOrderList,
  getWJD_and_WFH_num,
  jiancaiOrderDetails,
} from "../../../../utils/api";
import {
  getProductOrderList,
  cancelFuOrderList,
  getFuStatusCount,
  getProductOrderListDetail,
} from "../../../../utils/main";
export default {
  data() {
    return {
      topBtnList: [
        "全部",
        "待支付",
        "待接单",
        "待发货",
        "已发货",
        "已完成",
        "已取消",
      ],
      status: "", //订单状态  1正常 2完成 3取消
      ship_status: "", // 发货状态1 未接单  2接单未发货  3已发货  4已送达
      pay_status: "", //支付状态  1=未付款 2=已付款 3=部分付款 4=部分退款 5=已退款
      shop_name: "",
      order_id: "",
      consignee: "",
      consignee_phone: "",
      weijiedanNums: 0,
      weifahuoNums: 0,
      daifukuanNums: 0,
      loading: false,
      token: sessionStorage.getItem("token"),
      seller_id: sessionStorage.getItem("seller_id"),
      dialogVisible: false,
      formInline: {
        orderNum: "",
        shouhuoName: "",
        merchantName: "",
      },
      tableData: [],
      //查看
      form: [
        {
          name: "",
        },
      ],
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      total1: 0,
      limit1: 10,
      page1: 1,
      chooseIndex: 0,
      order_type: 52,
    };
  },
  methods: {
    chooseStatus(index) {
      console.log(index);
      this.chooseIndex = index;
      // 支付状态 1=未付款 2=已付款 3=部分付款 4=部分退款 5=已退款   pay_status
      // 发货状态 1=未接单 2=已发货 3=已送达 5=已退货     ship_status
      if (index == 0) {
        this.status = "";
        this.pay_status = "";
        this.ship_status = "";
      }
      if (index == 1) {
        //未支付
        this.status = 1;
        this.pay_status = 1;
        this.ship_status = 1;
      }
      if (index == 2) {
        //待接单
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 1;
      }
      if (index == 3) {
        //代发货
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 2;
      }
      if (index == 4) {
        //已发货
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 2;
      }
      if (index == 5) {
        //已完成
        this.status = 2;
        this.pay_status = 2;
        this.ship_status = 3;
      }
      if (index == 6) {
        //已取消
        this.status = 3;
        this.pay_status = "";
        this.ship_status = "";
      }
      this.goodsOrder();
    },
    // 取消订单
    cancleOrder(row) {
      this.$confirm("确认取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.id);
          cancelFuOrderList(
            this.token,
            row.order_id,
            row.pay_status,
            row.ship_status
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                type: "success",
                message: "取消订单成功",
              });
              this.goodsOrder();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消取消订单",
          });
        });
    },
    // 获取订单列表
    goodsOrder() {
      this.loading = true;
      getProductOrderList(
        this.token,
        this.seller_id,
        this.shop_name,
        this.formInline.orderNum,
        this.consignee,
        this.consignee_phone,
        this.status,
        this.pay_status,
        this.ship_status,
        this.page,
        this.limit
      ).then((res) => {
        if (res.data.status) {
          console.log(res.data.data.count);
          let list = res.data.data.data;
          this.total = res.data.data.count;
          list.forEach((item) => {
            if (item.status == 1) {
              if (item.pay_status == 1) {
                item.status_text = "待支付";
              }
              if (item.pay_status == 2) {
                if (item.ship_status == 1) {
                  item.status_text = "未接单";
                }
                if (item.ship_status == 2) {
                  item.status_text = "已结单";
                }
                if (item.ship_status == 3) {
                  item.status_text = "已发货";
                }
                if (item.ship_status == 4) {
                  item.status_text = "已送达";
                }
              }
            }
            if (item.status == 2) {
              item.status_text = "已完成";
            }
            if (item.status == 3) {
              item.status_text = "已取消";
            }
            item.allPirce =
              Number(item.order_amount) + Number(item.sender_amount);
          });
          this.tableData = list;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        }
        getFuStatusCount(
          this.token,
          this.seller_id,
          1,
          1,
          1,
          this.order_type
        ).then((res) => {
          if (res.data.status) {
            this.daifukuanNums = res.data.data.count;
          }
        });
        getFuStatusCount(
          this.token,
          this.seller_id,
          1,
          1,
          2,
          this.order_type
        ).then((res) => {
          if (res.data.status) {
            this.weijiedanNums = res.data.data.count;
          }
        });
        getFuStatusCount(
          this.token,
          this.seller_id,
          2,
          1,
          2,
          this.order_type
        ).then((res) => {
          if (res.data.status) {
            this.weifahuoNums = res.data.data.count;
          }
        });
      });
    },
    //查询
    onSubmit(row) {
      // console.log("查询!");
      this.page = 1;
      this.goodsOrder();
    },
    //重置
    onReset() {
      this.formInline = {
        orderNum: "",
        shouhuoName: "",
        merchantName: "",
      };
      this.goodsOrder();
    },
    // 序号排序
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //详情
    handleEdit(row) {
      getProductOrderListDetail(this.token, row.order_id).then((res) => {
        if (res.data.status) {
          this.dialogVisible = true;
          this.form = res.data.data;
          console.log(this.form);
          //1, //配送方式 1商家配送 2用户自提
          if (this.form.delivery_method == 1) {
            this.form.delivery_method_text = "商家配送";
          }
          if (this.form.delivery_method == 2) {
            this.form.delivery_method_text = "用户自提";
          }

          // 1原地卸货 2 电梯上楼 3 楼梯上楼
          if (this.form.up_method == 1) {
            this.form.up_method_text = "原地卸货";
          }
          if (this.form.up_method == 2) {
            this.form.up_method_text = "电梯上楼";
          }
          if (this.form.up_method == 3) {
            this.form.up_method_text = "楼梯上楼";
          }

          if (this.form.payment_code == null) {
            this.form.payment_code_text = "未支付";
          } else if (this.form.payment_code == "materialspay") {
            this.form.payment_code_text = "余额支付";
          } else if (this.form.payment_code == "wechatpay") {
            this.form.payment_code_text = "微信支付";
          }
        }
      });
    },
    //关闭
    handleClose(done) {
      done();
    },
    //弹框序号
    indexM(index) {
      // if (this.token < this.limit) {
      //   return this.total - index;
      // } else {
      //   return (
      //     this.total - (this.currentPage - 1) * this.limit - index
      //   );
      // }
    },
    //返回
    backtrack() {
      this.dialogVisible = false;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val;
      this.goodsOrder();
    },
    handleCurrentChange(val) {
      this.page = val;
      // console.log(`当前页: ${val}`);
      this.goodsOrder();
    },
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.goodsOrder();
  },
};
</script>
  
<style scoped>
.text {
  font-size: 14px;
}

/* .item {
    margin-bottom: 18px;
} */

.modality {
  display: flex;
  width: 100%;
}

.modality .leftImg {
  width: 20%;
}

.modalityUser {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  width: 70%;
  justify-content: center;
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  display: flex;
}

.gauge {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.oneLine {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.formUser {
  width: 60%;
}
.el-form-item {
  display: flex;
  /* width: 40%; */
  align-items: center;
}
.btnBox {
  margin-bottom: 20px;
}
.btnEevery {
  position: relative;
}
.btnEevery .tag {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  border-radius: 50px;
  padding: 2px;
  min-width: 13px;
  color: #fff;
  transform: translate(-0%, -50%);
}
.spanMag {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>